<!-- 组件名: index -->
<!-- 创建日期: 2023/12/26 -->
<!-- 编写者: Adil -->

<template>
  <div class="app-container">
    <el-card shadow="hover">
      <el-descriptions class="di">
        <template #title>
          <label>{{ dataList.name }}</label>
          <el-tag type="danger" style="border-radius: 20px">编辑</el-tag>
        </template>
        <el-descriptions-item label="项目类型">{{ dataList.statusName }}</el-descriptions-item>
        <el-descriptions-item label="是否公开">{{ dataList.typeName }}</el-descriptions-item>
        <el-descriptions-item label="访问方式">{{ dataList.visitWay }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatTime(dataList.createTimeStr) }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ dataList.userName }}</el-descriptions-item>
      </el-descriptions>

      <div>
        <label style="line-height: 50px">项目统计</label>
        <el-row :gutter="20">
          <el-col :span="6">
            <div @click="changeModule">
              <div class="div1">
                <i class="el-icon-folder-opened"></i>
                模块</div>
              <div class="div2">模块总数：{{data_list.modulesSiz}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div @click="changeStatus">
              <div class="div1">
                <i class="el-icon-error"></i>
                状态码</div>
              <div class="div2">状态码总数：{{data_list.StatusSize}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div @click="changeConnector">
              <div class="div1">
                <i class="el-icon-link"></i>
                接口</div>
              <div class="div2">接口总数：{{data_list.ConnectorSize}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="div1">
              <i class="el-icon-document"></i>
              文档</div>
            <div class="div2">文档总数：0</div>
          </el-col>
        </el-row>
      </div>

      <el-descriptions class="di" title="项目简介" style="margin-top: 20px">
        <el-descriptions-item label="简介">{{ dataList.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import {GetProjectID} from "@/api/project";
import store from "@/store";
import {formatTime} from "../../../utils/adil";

export default {
  name: "index",
  data() {
    return {
      id: '',
      username: '',
      dataList: {},
      data_list: {
        modulesSiz: '',
        StatusSize: '',
        ConnectorSize: ''
      }
    };
  },
  // 计算属性
  computed: {},
  created() {
    this.id = this.$route.params.id
    this.name = store.state.user.name
    GetProjectID(this.id).then(res => {
      this.dataList = res.result[0]
      this.data_list.modulesSiz = res.moduleSize
      this.data_list.StatusSize = res.StatusSize
        this.data_list.ConnectorSize = res.ConnecttorSize
    })
  },
  methods: {
    formatTime,
    changeModule(){
      const roleId = this.$route.params.id;
      this.$router.push("/project/module/" + roleId);
    },

    changeStatus() {
      this.$router.push("/project/status/" + this.id)
    },

    changeConnector() {
      this.$router.push("/project/connector/" + this.id)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
::v-deep .di .el-descriptions__body {
  padding: 25px;
  background: #f9fafc !important;
}

::v-deep .el-descriptions-item__label {
  color: #999!important;
  font-size: 12px;
}

::v-deep .el-col-6 {
  border: 1px solid #eeeeee;
  background: #f9fafc !important;
  padding: 10px;

  .div1{
    color: #555555;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }
  .div1:hover {
    color: #ff4530;
  }

  .div2 {
    font-size: 12px;
    color: #999!important;
    text-align: center;
    cursor: pointer;
  }
}
</style>
